<template>
	<view>
		<view class="box m-t">
			<view class="box-l">供应商:</view>
			<view class="box-r">{{ info.name }}</view>
		</view>
		<view class="box">
			<view class="box-l">欠供应商款:</view>
			<view class="box-r">{{ info.debt }}</view>
		</view>

		<view class="heads">
			<view class="box-l">支付方式</view>
			<view class="box-r">
				<view class="bx">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input">{{ array[index] }}</view>
					</picker>
				</view>
				<view class="arrow"><image src="../../static/images/arrow_right.png" mode=""></image></view>
			</view>
		</view>
		<view class="heads">
			<view class="box-l">业务时间</view>
			<view class="box-r">
				<view class="bx">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{ date }}</view>
					</picker>
				</view>
				<view class="arrow"><image src="../../static/images/arrow_right.png" mode=""></image></view>
			</view>
		</view>
		<view class="shop">点击按钮实现本次付款或供应商退款切换</view>
		<view class="heads" >
			<view class="box-l f32" style="color: #249AF6;" @tap="switchBtn()">
				<image src="../../static/images/202017050422.png" mode="aspectFit" class="img"></image>
				{{ showBox == true ? '本次付款' : '供应商退款' }}
			</view>
			<view class="box-r"><input type="text" v-model="money" placeholder="¥0.00" /></view>
		</view>
		<view class="heads">
			<view class="box-l">备注</view>
			<view class="box-r"><input type="text" v-model="remark" placeholder="请输入备注信息" /></view>
		</view>
		<view class="shop" v-show="showBox">提示：最终欠款 = 当前欠款 - 本次付款</view>
		<view class="shop" v-show="!showBox">提示：最终欠款 = 当前欠款 + 供应商退款</view>
		<view class="submitBtn" @tap="define()"><view class="text f36 cfff">确定</view></view>
	</view>
</template>

<script>
export default {
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			index: 0,
			array: ['现金', '支付宝', '微信', '银行卡', '其他'],
			date: currentDate, //日期
			money: '',
			remark: '', //备注
			showBox: true,
			supplierId: '',
			info: {},
			bank_card:'',
			cash: '',
			other: '',
			alipay: '',
			wechat: '',
			payType:''
		};
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	created() {},
	onLoad(option) {
		this.supplierId = option.id;
		this.getInfo();
	},
	watch:{
		money(newVal,oldVal){
			this.cash=newVal,
			this.bank_card=0,
			this.other=0,
			this.alipay=0,
			this.wechat=0
		}
	},
	methods: {
	
		switchBtn() {
		 this.showBox = !this.showBox;
			if(this.showBox==true){
				this.payType=1
			}
			if(this.showBox==false){
				this.payType=2
			}
		},
		bindPickerChange: function(e) {
			// console.log('picker发送选择改变，携带值为', e.target.value);
			
			this.index = e.target.value;
			if(this.index==0){
				this.cash=this.money
				this.bank_card=0,
				this.other=0,
				this.alipay=0,
				this.wechat=0
			}
			if(this.index==1){
				this.alipay=this.money,
				this.bank_card=0,
				this.other=0,
				this.cash=0,
				this.wechat=0
			}
			if(this.index==2){
				this.alipay=0,
				this.bank_card=0,
				this.other=0,
				this.cash=0,
				this.wechat=this.money
			}
			if(this.index==3){
				this.alipay=0,
				this.bank_card=this.money,
				this.other=0,
				this.cash=0,
				this.wechat=0
			}
			if(this.index==3){
				this.alipay=0,
				this.bank_card=0,
				this.other=this.money,
				this.cash=0,
				this.wechat=0
			}	
		},
		bindDateChange: function(e) {
			this.date = e.target.value;
			console.log(this.date);
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		//供应商详情

		getInfo() {
			let that = this;
			that.$ajax('api/v1.supplier/info', {
				supplier_id: that.supplierId,
				
			})
				.then(res => {
					if (res.code == 1) {
						that.info = res.result;
					}
				})
				.catch(res => {
					that.$sToast(res.message);
				});
		},
		//付款
		define() {
			let that = this;
			let pay_data={};
			pay_data.bank_card=this.bank_card
			pay_data.cash=this.cash
			pay_data.other=this.other
			pay_data.alipay=this.alipay
			pay_data.wechat=this.wechat
			that.$ajax('api/v1.supplier/pay', {
				supplier_id: that.supplierId,
				payment_type: that.payType,
				order_id: 0,
				pay_data: JSON.stringify(pay_data),
				remark: that.remark,
				create_time: that.date
			})
				.then(res => {
					if (res.code == 1) {
						if(that.showBox==true){
							that.$sToast('供应商付款成功');
							// that.$back();
						}
						if(that.showBox==false){
							that.$sToast('供应商退款成功');
							// that.$back();
						}
						
					}
				})
				.catch(res => {
					that.$sToast(res.message);
				});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f4f8;
}
.m-t {
	margin-top: 20rpx;
}
.box {
	height: 110rpx;
	line-height: 110rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	padding: 0 30rpx;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	background-color: #ffffff;
	border-bottom: 2rpx solid #eeeeee;
}
.heads {
	height: 110rpx;
	line-height: 110rpx;
	background-color: #ffffff;
	// margin-top: 30rpx;
	display: flex;
	justify-content: space-between;
	padding: 0 30rpx;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	position: relative;
	border-bottom: 2rpx solid #eeeeee;
	.arrow {
		image {
			width: 18rpx;
			height: 33rpx;
			vertical-align: middle;
			margin-left: 20rpx;
		}
	}
	.box-l {
		image {
			width: 32upx;
			height: 28upx;
			margin-right: 20upx;
			vertical-align: middle;
		}
	}
	.box-r {
		.box-l {
			display: flex;
			flex-direction: row;
		}
		input {
			width: 100%;
			text-align: right;
			height: 100%;
			overflow: hidden;
			padding-left: 100rpx;
			box-sizing: border-box;
		}
		.bx {
			position: absolute;
			right: 100rpx;
		}
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
	}
}
.shop {
	height: 87rpx;
	padding-left: 33rpx;
	line-height: 87rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(102, 102, 102, 1);
}
button {
	margin: 100rpx 30rpx;
}
.submitBtn {
	padding: 0 30upx;
	margin-top: 80upx;
	.text {
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		background-color: #249af6;
		text-align: center;
	}
}
</style>
